<template>
  <div style="display: flex; flex-direction: row">
    <div>
      <div class="h-full flex flex-row justify-between items-center gap-x-4">
        <div style="width: 32px; height: 32px">
          <img src="@/assets/logo.png" />
        </div>
        <div v-if="LayoutConfig.titleDisplay" class="text-lg" :style="headerStyle" style="min-width: 130px">
          {{ LayoutConfig.titleSetting }}
        </div>
      </div>
    </div>
    <div>
      <a-menu
          mode="horizontal"
          :theme="theme"
          :collapsed="collapsed"
          @select="handleMenuChanged"
          :selected-keys="selectedKeys"
      >
        <aside-sub-menu v-for="item in menuInfo" :key="item?.name" :menu="item" />
      </a-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import useAlLayoutMenu from '@/layouts/hooks/alLayoutMenu'
import { useRouter } from 'vue-router'
import { computed, CSSProperties, ref } from 'vue'
import AsideSubMenu from './AsideSubMenu.vue'
import LayoutConfig from '@/layouts/layoutConfig.json'

const collapsed = ref<boolean>(true)

const router = useRouter()

const theme = computed(() => {
  if (LayoutConfig.themeSettings === 'DARK_COLOR') {
    return 'dark'
  } else {
    return 'light'
  }
})
const headerStyle = computed(() => {
  const style = {
    zIndex: 1,
    textAlign: 'left',
    fontWeight: 400,
    fontStyle: 'normal',
    textDecoration: 'none'
  } as CSSProperties
  style.color = LayoutConfig.titleStyle.color
  style.textAlign =
      LayoutConfig.titleStyle.align === 'ALIGN_LEFT'
          ? 'left'
          : LayoutConfig.titleStyle.align === 'ALIGN_RIGHT'
              ? 'right'
              : 'center'
  if (LayoutConfig.titleStyle.bold) {
    style.fontWeight = 700
  }
  if (LayoutConfig.titleStyle.italic) {
    style.fontStyle = 'italic'
  }
  if (LayoutConfig.titleStyle.underline) {
    style.textDecoration = 'underline'
  }

  return style
})

const { selectedKeys, menuInfo } = useAlLayoutMenu()

// @ts-ignore
const handleMenuChanged = ({ key }) => {
  router.push({
    name: key as string
  })
}
</script>
<style></style>
